---
title: Surveillez votre site Astro avec Sentry
description: Comment surveiller votre site Astro avec Sentry
sidebar:
  label: Sentry
type: backend
logo: sentry
stub: false
i18nReady: true
---
import ReadMore from '~/components/ReadMore.astro';
import { Steps } from '@astrojs/starlight/components';
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro'

[Sentry](https://sentry.io) offre un service complet de surveillance des applications et de suivi des erreurs, conçu pour aider les développeurs à identifier, diagnostiquer et résoudre les problèmes en temps réel.

Pour en savoir plus, consultez notre blog sur [le partenariat entre Astro et Sentry](https://astro.build/blog/sentry-official-monitoring-partner/) et la barre d'outils Spotlight de Sentry, qui apporte une riche couche de débogage dans votre environnement de développement Astro. Spotlight affiche les erreurs, les traces et le contexte important directement dans votre navigateur pendant le développement local.

Le SDK Astro de Sentry permet de signaler automatiquement les erreurs et les données de traçage dans votre application Astro.

## Configuration du projet

Une liste complète des prérequis est disponible dans [le guide Sentry pour Astro](https://docs.sentry.io/platforms/javascript/guides/astro/#prerequisites).

## Installation

Sentry capture des données en utilisant un SDK dans le runtime de votre application.

Installez le SDK en exécutant la commande suivante pour le gestionnaire de paquets de votre choix dans la CLI d'Astro :

<PackageManagerTabs>
  <Fragment slot="npm">
    ```shell
    npx astro add @sentry/astro
    ```
  </Fragment>
  <Fragment slot="pnpm">
    ```shell
    pnpm astro add @sentry/astro
    ```
  </Fragment>
  <Fragment slot="yarn">
    ```shell
    yarn astro add @sentry/astro
    ```
  </Fragment>
</PackageManagerTabs>

La CLI d'Astro installe le paquet SDK et ajoute l'intégration Sentry à votre fichier `astro.config.mjs`.

## Configuration

Pour configurer l'intégration de Sentry, vous devez fournir les informations d'identification suivantes dans votre fichier `astro.config.mjs`.

1. **Client key (DSN)** - Vous trouverez le DSN dans les paramètres de votre projet Sentry sous *Client keys (DSN)*.
2. **Project name** - Vous trouverez le nom du projet dans les paramètres de votre projet Sentry sous *General settings*.
3. **Auth token** - Vous pouvez créer un jeton d'authentification dans les paramètres de votre organisation Sentry sous *Auth tokens*.

:::note
Si vous créez un nouveau projet Sentry, sélectionnez Astro comme plateforme pour obtenir toutes les informations nécessaires à la configuration du SDK.
:::

```js title="astro.config.mjs" ins={2, 6-12}
import { defineConfig } from 'astro/config';
import sentry from '@sentry/astro';

export default defineConfig({
  integrations: [
    sentry({
      dsn: 'https://examplePublicKey@o0.ingest.sentry.io/0',
      sourceMapsUploadOptions: {
        project: 'example-project',
        authToken: process.env.SENTRY_AUTH_TOKEN,
      },
    }),
  ],
});
```
Une fois que vous avez configuré votre `sourceMapsUploadOptions` et ajouté votre `dsn`, le SDK capturera et enverra automatiquement les erreurs et les événements de performance à Sentry.

## Tester votre installation

Ajoutez l'élément `<button>` suivant à l'une de vos pages `.astro`. Cela vous permettra de déclencher manuellement une erreur afin de tester le processus de rapport d'erreur.

```astro title="src/pages/index.astro"
<button onclick="throw new Error('Il s\'agit d\'une erreur de test')">Générer une erreur de test</button>
```

Pour visualiser et résoudre l'erreur enregistrée, connectez-vous à [sentry.io](https://sentry.io/) et ouvrez votre projet.
